<template>
  <div @click="handleClick" v-show="show" class="to-top-container">
      Top
  </div>
</template>

<script>
export default {
    data(){
        return {
            show: false
        }
    },
    created(){
        this.$eventBus.$on('mainScroll', this.scrollShow)
    },
    destroyed(){
        this.$eventBus.$off('mainScroll', this.scrollShow)
    },
    methods: {
        scrollShow(dom){
            if(!dom){
                this.show = false;
                return;
            }
            this.show = dom.scrollTop >= 1000? true : false;
        },
        handleClick(){
            this.$eventBus.$emit('mainScrollTop', 0)
        }
    }
}
</script>

<style scoped lang="less">
@import "~@/style/var.less";
.to-top-container{
    width: 60px;
    height: 60px;
    color: #fff;
    background: @primary;
    border-radius: 50%;
    position: fixed;
    right: 80px;
    bottom: 50px;
    line-height: 60px;
    text-align: center;
    cursor: pointer;
}
</style>